<template>
  <div id="detail">
    <!--顶部导航栏-->
    <detail-nar-bar class="detail-nav-bar" ref="narbar" :itemCenter="['商品','参数','评论','推荐']" @itemClick="titleClick"></detail-nar-bar>

    <better-scroll
      class="contentScroll"
      ref="backTop"
      @betterScroll="contentScroll"
      :probe-type="3">
      <detail-swiper ref="swiper" @imagesLoads="imagesLoad" :top-images="topImage"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
      <detail-param-info ref="param" :params-info="paramsInfo"></detail-param-info>
      <comment-item ref="comment" :detail-rate="detailRate"></comment-item>
      <detail-recommend-info ref="recommend" :get-recommend="getRecommend"></detail-recommend-info>
    </better-scroll>
    <detail-bottom-bar @addClick="addClick"></detail-bottom-bar>

    <back-top class="backTop" v-show="position" @click.native="backTopClick"></back-top>
  </div>
</template>

<script>
  import DetailNarBar from "views/detail/detailComps/DetailNarBar";
  import DetailSwiper from "views/detail/detailComps/DetailSwiper";
  import DetailBaseInfo from "views/detail/detailComps/DetailBaseInfo";
  import DetailShopInfo from "views/detail/detailComps/DetailShopInfo";
  import DetailGoodsInfo from "views/detail/detailComps/DetailGoodsInfo";
  import DetailParamInfo from "views/detail/detailComps/DetailParamInfo";
  import BetterScroll from "components/common/betterscroll/BetterScroll";
  import CommentItem from "components/content/comment/CommentItem";
  import DetailRecommendInfo from "views/detail/detailComps/DetailRecommendInfo";
  import BackTop from "components/content/backtop/BackTop";
  import DetailBottomBar from "views/detail/detailComps/DetailbottomBar";
  import {getDetail,getRecommend,GoodsInfo,ShopInfo,DetailList,GoodsParam,DetailRate,getDetailRecommend} from "network/detail";
  import {debounce} from "common/utils";
  import {itemListenerMixin,backTopMixin} from "common/mixin";

  export default {
    name: "Detail",
    components: {
      DetailNarBar,
      DetailSwiper,
      getDetail,
      DetailBaseInfo,
      ShopInfo,
      DetailShopInfo,
      BetterScroll,
      DetailList,
      DetailGoodsInfo,
      GoodsParam,
      DetailParamInfo,
      DetailRate,
      CommentItem,
      DetailRecommendInfo,
      BackTop,
      DetailBottomBar
    },
    data(){
      return {
        iId: null,
        topImage: [],
        goods: {},
        shop: {},
        detailInfo: {},
        paramsInfo: {},
        detailRate: {},
        getRecommend: {},
        themeTopY:[],
        getThemeTopY:null,
        currentIndex: 0
      };
    },
    mixins:[itemListenerMixin,backTopMixin],
    methods:{
      addClick(){
        //1、获取购物车需要的展示信息
        const product = {
          image: this.topImage[0],
          title: this.goods.title,
          desc: this.goods.desc,
          price: this.goods.realPrice,
          id: this.iId,
        };
        //2、将商品添加到购物车
        this.$store.commit('addCart',product);
      },
      /**
       * DetailNarBar子组件传入
       */
      titleClick(index){
        this.$refs.backTop.scrollTo(0,-this.themeTopY[index],100);
      },
      contentScroll(position){
        //使用了浑入
        this.listenShoBackTop(position);

        for (let i=0;i< this.themeTopY.length - 1;i++){
          if ((-position.y >= this.themeTopY[i] && -position.y < this.themeTopY[i+1])){
            this.currentIndex = i;
            this.$refs.narbar.currentIndex = this.currentIndex;
          }
        }
      },
      imagesLoad(){
        this.newRefresh();
      },
      imageLoad(){
        this.newRefresh();

        this.getThemeTopY();//使用回调函数
      },
      _getDetailData(){
        this.iId = this.$route.params.id;

        getDetail(this.iId).then(res => {
          console.log(res)
          const data = res.data.result;
          this.topImage = data.itemInfo.topImages;
          this.goods = new GoodsInfo(data.itemInfo,data.columns,data.shopInfo.services);
          this.shop = new ShopInfo(data.shopInfo);
          this.detailInfo = new DetailList(data.detailInfo);
          this.paramsInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule);
          this.detailRate = new DetailRate(data.rate.list);
        });
      },
      _getRecommend(){
        getRecommend().then(res => {
          this.getRecommend = new getDetailRecommend(res.data.data.list);
        });
      }
    },
    created() {
      /**
       * 详情页信息列表  商品 | 参数 | 评论
       */
      this._getDetailData();

      this._getRecommend();

      //定义防抖回调函数
      this.getThemeTopY = debounce(()=>{
        this.themeTopY.push(this.$refs.swiper.$el.offsetTop)
        this.themeTopY.push(this.$refs.param.$el.offsetTop);
        this.themeTopY.push(this.$refs.comment.$el.offsetTop);
        this.themeTopY.push(this.$refs.recommend.$el.offsetTop);
        this.themeTopY.push(Number.MAX_VALUE);//获取Number的最大值
      },100);
    },
    mounted() {
      const debounces = debounce(this.$refs.backTop.refresh,200);

      this.$bus.$on("itemLoad",() => {
        debounces();
      });
      console.log(this.getRecommend)
    }
  }
</script>

<style scoped>
  #detail{
    position: relative;
    z-index: 9;
    height: 100vh;
    background-color: #f6f6f6;
  }
  .contentScroll{
    position: absolute;
    top: 49px;
    left: 0;
    right: 0;
    bottom: 49px;
    overflow: hidden;
  }
  .detail-nav-bar{
    position: relative;
    z-index: 10;
    background-color: white;
  }
</style>
